// import { template } from "handlebars";

$(function() {
    /*
    1 给搜索按钮绑定点击事件
    2 点击搜索按钮的时候拿到输入框里面的值
    3 判断输入框里面是否输入了值 如果没有输入就给出提示
    4 如果之前没有存入值 那么就把这次的值存进去
      如果之前已经存过值了,那么需要先把之前的值取出来然后再跟
      这次的值一起再次存入进去
    如果有值 我们就把值进行本地缓存
    */

    // 1 给搜索按钮绑定点击事件
    // var arr=[];
    $('#search').on('tap',function() {
        var arr=[];
        var val=$('#keyWord').val();
        if(val.length<=0) {
            alert('请输入关键字');
            return;
        }
        if(localStorage.getItem('keyWord')) {
            // 把之前的取出来
            arr=JSON.parse(localStorage.getItem('keyWord'));
            // 把输入的关键字跟之前的一起放到数组里面
            arr.push(val);
            console.log(arr);
            // 把所有的再存入本地缓存
            localStorage.setItem('keyWord',JSON.stringify(arr));

        } else {
            // 判断如果之前没有 那么就把这次输入的关键字存入
            arr.push(val);
            localStorage.setItem('keyWord',JSON.stringify(arr));
        }

        // 跳转页面
        window.location.href='search-list.html?key='+val;




        
        // 2 点击搜索按钮的时候 拿到输入框里面的值
        // var val=$('#keyWord').val();
        // console.log(val);
        
        // if(val.length<=0) {
        //     alert("请输入你想要的内容");
        //     return;
        // }else {
            // 4 如果有值 我们就把值进行本地缓存
            // 本地缓存只能缓存字符串
            // localStorage.setItem('key',val);
          
        //     arr.push(val);
        //     console.log(arr);
            
        //     localStorage.setItem('key',JSON.stringify(arr));
        // }
    })
    /*
    1 一进来 如果有搜索历史数据 那么应该展示历史数据
    */ 

    if(localStorage.getItem('keyWord')) {
        // var vals=localStorage.getItem('key');
        // console.log(vals);
        // alert(1);
        var vals=JSON.parse(localStorage.getItem('keyWord'));
        console.log(vals);
        var obj={
            rows: vals
        }
        var htmls=template('oldData',obj);
        console.log(htmls);
        
        $('#ulBox').html(htmls);
    }
``
    $('#clearOld').on('tap',function() {
        localStorage.removeItem('keyWord');
        alert(1);
        // $('#keyWord').val();
        $('#keyWord').val('');
        // $('#ulBox').html('');
        $('#ulBox').html('');
    })
})